<template>
  <div class="app-list">
    <a-list
      :loading="loading"
      :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
      :dataSource="records"
    >
      <template v-slot:renderItem="{ item }">
        <a-list-item>
          <a-card :hoverable="true">
            <a-card-meta>
              <template v-slot:title>
                <div style="margin-bottom: 3px">{{ item.name }}</div>
              </template>
              <template v-slot:avatar>
                <a-avatar
                  class="card-avatar"
                  :src="item.picture"
                  size="small"
                />
              </template>
              <template v-slot:description>
                <div class="meta-cardInfo">
                  <div>
                    <p>活跃用户</p>
                    <p>
                      <span>{{ item.activeUser }}<span>万</span></span>
                    </p>
                  </div>
                  <div>
                    <p>新增用户</p>
                    <p>{{ item.newUser }}</p>
                  </div>
                </div>
              </template>
            </a-card-meta>
            <template class="ant-card-actions" v-slot:actions>
              <a><CloudDownloadOutlined /> </a>
              <a>
                <EditOutlined />
              </a>
              <a>
                <ShareAltOutlined />
              </a>
              <a>
                <a-dropdown>
                  <a class="ant-dropdown-link" href="javascript:;">
                    <EllipsisOutlined />
                  </a>
                  <template v-slot:overlay>
                    <a-menu>
                      <a-menu-item>
                        <a href="javascript:;">1st menu item</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a href="javascript:;">2nd menu item</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a href="javascript:;">3rd menu item</a>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </a>
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script lang="ts">
import {
  CloudDownloadOutlined,
  EditOutlined,
  ShareAltOutlined,
  EllipsisOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, onMounted, ref } from "vue";
import { getAppPageOfMy } from "@/api/Dms/App/index";
export default defineComponent({
  components: {
    CloudDownloadOutlined,
    EditOutlined,
    ShareAltOutlined,
    EllipsisOutlined,
  },
  setup() {
    const records = ref<Array<AppVo>>([]);
    const loading = ref(false);
    const getList = async () => {
      try {
        loading.value = true;
        const { data } = await getAppPageOfMy();
        records.value = data.records;
      } catch (error) {
        console.log(error);
      } finally {
        loading.value = false;
      }
    };
    onMounted(() => {
      getList();
    });
    return {
      records,
      loading,
    };
  },
});
</script>

<style lang="less" scoped>
.app-list {
  .meta-cardInfo {
    zoom: 1;
    margin-top: 16px;

    > div {
      position: relative;
      text-align: left;
      float: left;
      width: 50%;

      p {
        line-height: 32px;
        font-size: 24px;
        margin: 0;

        &:first-child {
          color: rgba(0, 0, 0, 0.45);
          font-size: 12px;
          line-height: 20px;
          margin-bottom: 4px;
        }
      }
    }
  }
}
</style>
